/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 车辆叫号系统-司机信息管理
 */
import React, { useRef, useCallback, useEffect, useState } from 'react';
import { vehicleCallDriverList, vehicleCallDriverExamine } from '@/services/vehicleCall/driver';
import ProTable from '@ant-design/pro-table';
import { Input, Button, message, Popconfirm, Row, Col } from 'antd';
import type { ConnectState } from '@/models/connect';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import type { TableListItem } from '@/pages/vehicleCall/driver/index.d';
import { useSelector } from 'umi';
import KbImage from '@/components/KbImage';
import { ModalForm } from '@ant-design/pro-form';
import styles from './table.less';

interface BlackListTableType {
  activeKey: string;
  type: string;
}

interface RefuseModalProps {
  children: JSX.Element;
  tableRef: ActionType | undefined;
  item: TableListItem;
  activeKey: string;
}

const RefuseModal: React.FC<RefuseModalProps> = ({ item, children, tableRef, activeKey }) => {
  const [platform, setPlatForm] = useState<string>('');
  return (
    <ModalForm
      title='司机信息审核'
      className={styles.RefuseModal}
      trigger={children}
      width={540}
      onFinish={async () => {
        const params = {
          platform,
          id: item.id,
        };
        const { code, msg } = await vehicleCallDriverExamine(params);
        if (code == 0) {
          message.success(msg);
          tableRef?.reload();
          return true;
        }
        message.error(msg);
        return false;
      }}
      submitter={{
        render: (props) =>
          activeKey === 'reviewed'
            ? [
                <Popconfirm title='确定拒绝？' key='refuse' onConfirm={() => props.submit()}>
                  <Button type='primary' danger onClick={() => setPlatForm('refuse')}>
                    拒绝
                  </Button>
                </Popconfirm>,
                <Popconfirm title='确定通过？' key='pass' onConfirm={() => props.submit()}>
                  <Button type='primary' onClick={() => setPlatForm('pass')}>
                    通过
                  </Button>
                </Popconfirm>,
              ]
            : null,
      }}
    >
      <Row>
        <Col span={5}>状态:</Col>
        <Col span={19}>{item.status}</Col>
        <Col span={5}>手机号:</Col>
        <Col span={19}>{item.mobile}</Col>
        <Col span={5}>姓名:</Col>
        <Col span={19}>{item.name}</Col>
        <Col span={5}>身份证号:</Col>
        <Col span={19}>{item.identityCard}</Col>
        <Col span={5}>驾驶证:</Col>
        <Col span={19} className={styles.RefuseModal__license}>
          {item.license.length > 0
            ? item.license.map((item1: string, index: number) => {
                return <KbImage key={index} src={item1} preview={false}></KbImage>;
              })
            : null}
        </Col>
      </Row>
    </ModalForm>
  );
};

const DriverTable = ({ type, activeKey }: BlackListTableType) => {
  const actionRef = useRef<ActionType>();
  const { winSize } = useSelector((state: ConnectState) => state.global);
  const columns: ProColumns<TableListItem>[] = [
    {
      title: '',
      hideInTable: true,
      dataIndex: 'keywords',
      renderFormItem: () => {
        return <Input name='keywords' placeholder='请输入手机号' />;
      },
    },
    {
      title: '用户id',
      dataIndex: 'id',
      align: 'center',
      search: false,
      ellipsis: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      align: 'center',
      search: false,
      ellipsis: true,
    },
    {
      title: '身份证号',
      dataIndex: 'identityCard',
      align: 'center',
      search: false,
      ellipsis: true,
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      align: 'center',
      search: false,
      ellipsis: true,
    },
    {
      title: '注册时间',
      dataIndex: 'registrationTime',
      align: 'center',
      search: false,
      ellipsis: true,
    },
    {
      title: '微信昵称',
      dataIndex: 'weChatNickName',
      align: 'center',
      search: false,
      ellipsis: true,
    },
    {
      title: '审核时间',
      dataIndex: 'auditTime',
      hideInTable: activeKey !== 'pass' && activeKey !== 'refuse',
      align: 'center',
      search: false,
      ellipsis: true,
    },
    {
      title: '操作',
      align: 'center',
      dataIndex: 'is_in_black',
      key: 'option1',
      valueType: 'option',
      width: winSize === 'xs' ? 80 : 130,
      fixed: 'right',
      render: (_, record) => {
        return (
          <RefuseModal
            key='refuse'
            item={record}
            tableRef={actionRef.current}
            activeKey={activeKey}
          >
            <a key='link'>详情</a>
          </RefuseModal>
        );
      },
    },
  ];

  const requestTableData = useCallback(
    async (values) => {
      const { current, pageSize, keywords } = values;
      const reqData: {
        page: number;
        size: number;
        phone: string;
        activeKey: string;
      } = {
        page: current,
        size: pageSize,
        phone: keywords,
        activeKey,
      };
      const { code, data, msg } = await vehicleCallDriverList(reqData);
      if (code == 0) {
        const formatList = data?.list?.map((item: { device_phone: any }) => ({
          ...item,
          device_phone: item.device_phone || keywords || '',
        }));
        return { data: formatList, total: data.count };
      } else {
        message.error(msg);
      }
    },
    [type],
  );

  useEffect(() => {
    if (activeKey !== type) return;
    actionRef.current?.reload();
  }, [activeKey, type]);

  return (
    <>
      <ProTable<TableListItem>
        actionRef={actionRef}
        rowKey='id'
        className={styles.table}
        request={requestTableData}
        columns={columns}
        options={false}
        pagination={{
          pageSize: 20,
          showQuickJumper: false,
          showSizeChanger: false,
        }}
        scroll={{ x: 1200 }}
        search={{
          optionRender: (_, { form }) => [
            <Button
              key='phone'
              type='primary'
              onClick={() => {
                form?.submit();
              }}
            >
              搜索
            </Button>,
          ],
        }}
      />
    </>
  );
};

export default DriverTable;
